<template>
<div id="app">
    <transition :name="transitionName">
        <router-view class="router-view" />
    </transition>
</div>
</template>

<script>
import attachFastClick from 'fastclick'
import { getUserInfo } from '@/api'
export default {
    data() {
        return {
            transitionName: 'fade-right'
        }
    },
    created() {
        getUserInfo().then(res => {
            if (res.status == 0) {
                this.$store.commit('setUserInfo', res.data)
                this.$store.dispatch('fecthCarList')
            }
        })
    },
    mounted() {
        attachFastClick.attach(document.body)
    },
    // 判断当前路由是在进入新页面还是在返回老页面
    // 如果进入新页面使用 fade-right
    // 如果是返回老页面使用fade-left
    // 如果是tabbar组件跳转，没有动画
    watch: {
        $route: function (to, from) {
            // console.log(this.$router) // 指的就是使用new VueRouter() 创建出来的那个实例对象
            // console.log(this.$route) // 指的是每一个路由规则对象
            // meat叫做路由元信息，可以自定义一些需要用来区分路由的属性
            if (to.meta.index > from.meta.index) {
                this.transitionName = 'fade-right'
            } else if (to.meta.index < from.meta.index) {
                this.transitionName = 'fade-left'
            } else {
                this.transitionName = ''
            }
        }
    }
}
</script>

<style lang="scss" scoped>
#app {
    overflow-x: hidden;
    // position: absolute;
    // left: 0;
    // top: 0;
    width: 100%;
    height: 100%;
}

// 进入新页面动画
.fade-right-enter,
.fade-left-leave-to {
    opacity: 0;
    transform: translateX(100%)
}

.fade-right-leave-to,
.fade-left-enter {
    opacity: 0;
    transform: translateX(-100%)
}

.fade-right-enter-active,
.fade-right-leave-active,
.fade-left-enter-active,
.fade-left-leave-active {
    transition: all 0.5s ease;
}

.fade-right-enter-to,
.fade-right-leave,
.fade-left-enter-to,
.fade-left-leave {
    opacity: 1;
    transform: translateX(0)
}

// 解决过渡效果出现白屏
.router-view {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
}
</style>
